import './index.scss'
import {
  Button,
  ConfigProvider,
  FloatButton,
  Layout,
  Modal,
  Radio,
  theme,
} from 'antd'
import zhCN from 'antd/locale/zh_CN'
import useRouter from './routes'
import Header from './components/Header'
import { Suspense, useContext, useEffect, useState } from 'react'
import Loading from './components/Loding'
import 'animate.css'
import userStore from './store'
import isMobile from 'is-mobile'

let prePathname

const App = () => {
  const [visible, setVisible] = useState(false)
  const routes = useRouter()
  const [value, setValue] = useState('default')

  const changeRoute = (route) => {
    if (!route) return

    const pathname = routes.props.match.pathname
    if (prePathname !== pathname) {
      document.documentElement.scrollTop = 0
    }
    prePathname = pathname
    if (pathname === '/') {
      return route
    }
    return route
  }

  useEffect(() => {
    initUser()
    // 检测是否是移动端
    if (isMobile()) {
      if (!hasClosedToday()) {
        setVisible(true)
      }
    }
  }, [])

  const initUser = async () => {
    try {
      if (userStore.isLogin) {
        return
      }
      const user = localStorage.getItem('user')

      if (!user.token) {
        throw new Error('没有token')
      }
    } catch (error) {}
  }

  const handleClose = () => {
    const today = new Date().toDateString()
    localStorage.setItem('hasClosedToday', today)
    setVisible(false)
  }

  const hasClosedToday = () => {
    const closed = localStorage.getItem('hasClosedToday')
    const today = new Date().toDateString()
    return closed === today
  }

  const handleSwitchTheme = (e) => {
    setValue(e.target.value)
  }

  return (
    <ConfigProvider
      locale={zhCN}
      wave={{ disabled: true }}
      theme={{
        algorithm:
          value === 'default' ? theme.defaultAlgorithm : theme.darkAlgorithm,
      }}
    >
      <Layout>
        <div className="App">
          <Suspense fallback={<Loading fixed>页面加载中...</Loading>}>
            <Header theme={value} handleSwitchTheme={handleSwitchTheme} />
            {!hasClosedToday() && (
              <Modal
                open={visible}
                onCancel={() => handleClose()}
                title={
                  <span style={{ color: 'var(--Color-Crystal)' }}>
                    椰羊动漫
                  </span>
                }
                footer={null}
              >
                <p style={{ fontSize: '12px', color: '#9A3B3B' }}>
                  您可以将网站添加到手机桌面，点击浏览器菜单，选择“添加到主屏幕”，以便更方便的快速访问
                </p>
                <div
                  style={{
                    borderBottom: '1px solid #f1f2f3',
                    marginBottom: '10px',
                  }}
                />
                <div style={{ display: 'none' }}>
                  <div style={{ fontSize: '14px', color: '#A73121' }}>
                    为防止走丢，强烈建议下载APP!!!
                  </div>

                  <Button
                    type="primary"
                    style={{
                      backgroundColor: '#1F8A70',
                      fontSize: '12px',
                      margin: '10px 0',
                    }}
                  >
                    <a href="https://dullwolf.oss-cn-shenzhen.aliyuncs.com/%E6%A4%B0%E7%BE%8A%E5%8A%A8%E6%BC%AB-apk.apk">
                      Android 客户端
                    </a>
                  </Button>
                  <div
                    style={{
                      borderBottom: '1px solid #f1f2f3',
                      marginBottom: '10px',
                    }}
                  />
                </div>

                <Button
                  block
                  onClick={() => handleClose()}
                  style={{ color: '#7091F5' }}
                >
                  关闭（今日不再提示）
                </Button>
              </Modal>
            )}
            {changeRoute(routes)}
            <FloatButton.BackTop style={{ bottom: 70, right: 70 }} />
          </Suspense>
        </div>
      </Layout>
    </ConfigProvider>
  )
}

export default App
